<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图管理</title>
    <link href="../../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <script src="../../lib/layui-v2.6.3/layui.js"></script>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../frontstatic/js/notify.js"></script>
    <script src="../../frontstatic/js/notify_stand.js"></script>
</head>
<body>
<div style="width: 85%">
    <div style="border: 1px solid #afacac;border-radius: 5px;float: left;position: relative;left: 100px;top: 150px">
        <div class="layui-upload-drag" id="test1">
            <i class="layui-icon" id="myBtn1"></i>
            <p id="p1">图示1:  点击或拖拽上传</p>
            <div class="layui-hide" id="uploadDemoView1">
                <img  src="" alt="上传成功后渲染" style="max-width: 196px">
                <input id="img1" style="display: none">
            </div>
        </div>
        <div class="layui-upload-drag" id="test2">
            <i class="layui-icon" id="myBtn2"></i>
            <p id="p2">图示2:  点击或拖拽上传</p>
            <div class="layui-hide" id="uploadDemoView2">
                <img  src="" alt="上传成功后渲染" style="max-width: 196px">
                <input id="img2" style="display: none">
            </div>
        </div>
        <div class="layui-upload-drag" id="test3">
            <i class="layui-icon" id="myBtn3"></i>
            <p id="p3">图示3:  点击或拖拽上传</p>
            <div class="layui-hide" id="uploadDemoView3">
                <img  src="" alt="上传成功后渲染" style="max-width: 196px">
                <input id="img3" style="display: none">
            </div>
        </div>
        <div class="layui-upload-drag" id="test4">
            <i class="layui-icon" id="myBtn4"></i>
            <p id="p4">图示4:  点击或拖拽上传</p>
            <div class="layui-hide" id="uploadDemoView4">
                <img  src="" alt="上传成功后渲染" style="max-width: 196px">
                <input id="img4" style="display: none">
            </div>
        </div>
        <div class="layui-upload-drag" id="test5">
            <i class="layui-icon" id="myBtn5"></i>
            <p id="p5">图示5:  点击或拖拽上传</p>
            <div class="layui-hide" id="uploadDemoView5">
                <img   src="" alt="上传成功后渲染" style="max-width: 196px">
                <input id="img5" style="display: none">
            </div>
        </div>
        <div class="layui-upload-drag" id="test6">
            <i class="layui-icon" id="myBtn6"></i>
            <p id="p6">图示6:  点击或拖拽上传</p>
            <div class="layui-hide" id="uploadDemoView6">
                <img  src="" alt="上传成功后渲染" style="max-width: 196px">
                <input id="img6" style="display: none">
            </div>
        </div>
    </div>
</div>
<button type="button" id="updateBtn" class="layui-btn layui-btn-normal" style="position: relative;top: 500px;right: 670px">保存</button>
</body>
<script>
    var notify;
    layui.use(['notify'],function(){
        notify=layui.notify;
    })
    layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            ,upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        //1
        upload.render({
            elem: '#test1'
            ,url: '/imagefile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,done: function(res){
                layui.$('#uploadDemoView1').removeClass('layui-hide').find('img').attr('src', res.data);
                document.getElementById("myBtn1").style.display = "none";
                document.getElementById("p1").style.display = "none";
                $("#img1").val(res.data)
            }
        });
        //2
        upload.render({
            elem: '#test2'
            ,url: '/imagefile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,done: function(res){
                layui.$('#uploadDemoView2').removeClass('layui-hide').find('img').attr('src', res.data);
                document.getElementById("myBtn2").style.display = "none";
                document.getElementById("p2").style.display = "none";
                $("#img2").val(res.data)
            }
        });
        //3
        upload.render({
            elem: '#test3'
            ,url: '/imagefile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,done: function(res){
                layui.$('#uploadDemoView3').removeClass('layui-hide').find('img').attr('src', res.data);
                document.getElementById("myBtn3").style.display = "none";
                document.getElementById("p3").style.display = "none";
                $("#img3").val(res.data)
            }
        });
        //4
        upload.render({
            elem: '#test4'
            ,url: '/imagefile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,done: function(res){
                layui.$('#uploadDemoView4').removeClass('layui-hide').find('img').attr('src', res.data);
                document.getElementById("myBtn4").style.display = "none";
                document.getElementById("p4").style.display = "none";
                $("#img4").val(res.data)
            }
        });
        //5
        upload.render({
            elem: '#test5'
            ,url: '/imagefile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,done: function(res){
                layui.$('#uploadDemoView5').removeClass('layui-hide').find('img').attr('src', res.data);
                document.getElementById("myBtn5").style.display = "none";
                document.getElementById("p5").style.display = "none";
                $("#img5").val(res.data)
            }
        });
        //6
        upload.render({
            elem: '#test6'
            ,url: '/imagefile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,done: function(res){
                layui.$('#uploadDemoView6').removeClass('layui-hide').find('img').attr('src', res.data);
                document.getElementById("myBtn6").style.display = "none";
                document.getElementById("p6").style.display = "none";
                $("#img6").val(res.data)
            }
        });
        //获取设置的轮波图
        $.get("/image/getList",function(ex) {
            if (ex.code==0){
              var img=ex.data
                if (img.image1!=""){
                    document.getElementById("myBtn1").style.display = "none";
                    document.getElementById("p1").style.display = "none";
                    layui.$('#uploadDemoView1').removeClass('layui-hide').find('img').attr('src',img.image1);
                    $("#img1").val(img.image1)
                }
                if (img.image2!=""){
                    document.getElementById("myBtn2").style.display = "none";
                    document.getElementById("p2").style.display = "none";
                    layui.$('#uploadDemoView2').removeClass('layui-hide').find('img').attr('src',img.image2);
                    $("#img2").val(img.image2)
                }
                if (img.image3!=""){
                    document.getElementById("myBtn3").style.display = "none";
                    document.getElementById("p3").style.display = "none";
                    layui.$('#uploadDemoView3').removeClass('layui-hide').find('img').attr('src',img.image3);
                    $("#img3").val(img.image3)
                }
                if (img.image4!=""){
                    document.getElementById("myBtn4").style.display = "none";
                    document.getElementById("p4").style.display = "none";
                    layui.$('#uploadDemoView4').removeClass('layui-hide').find('img').attr('src',img.image4);
                    $("#img4").val(img.image4)
                }
                if (img.image5!=""){
                    document.getElementById("myBtn5").style.display = "none";
                    document.getElementById("p5").style.display = "none";
                    layui.$('#uploadDemoView5').removeClass('layui-hide').find('img').attr('src',img.image5);
                    $("#img5").val(img.image5)
                }
                if (img.image6!=""){
                    document.getElementById("myBtn6").style.display = "none";
                    document.getElementById("p6").style.display = "none";
                    layui.$('#uploadDemoView6').removeClass('layui-hide').find('img').attr('src',img.image6);
                    $("#img6").val(img.image6)
                }
            }else {
                notify.error(ex.msg);
            }
        })
        //保存上传的轮播图
        $("#updateBtn").on('click',function() {
            var image={
                "image1":$('#img1').val(),
                "image2":$('#img2').val(),
                "image3":$('#img3').val(),
                "image4":$('#img4').val(),
                "image5":$('#img5').val(),
                "image6":$('#img6').val(),
            }
            $.ajax({
                type : "POST",
                contentType: "application/json",
                data:JSON.stringify(image),
                dataType: "json",
                url:"/image/update",
                async : true,
                success : function(date){
                    if (date.code==0) {
                        notify.success(date.msg);
                    }else {
                        notify.error(date.msg);
                    }
                }
            })
        })
    });
</script>
</html>